<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摆渡村-壁纸-首页</title>
    <link rel="stylesheet" th:href="@{/css/menu.css}">
    <link rel="stylesheet" th:href="@{/css/admin-list.css}">
    <script rel="script" th:src="@{/js/vue.js}"></script>
    <style>
        ::-webkit-scrollbar {display:none}
    </style>
</head>
<body>
<div id="app">

    <div class="nav">
        <div class="brand">
            <div class="brand-title">后台壁纸管理</div>
        </div>
        <div class="menu">
            <ul>
                <li><a th:href="@{/upload}">上传</a></li>
                <li><a th:href="@{/view}">壁纸</a></li>
                <li><a th:href="@{/type}">类型</a></li>
            </ul>
        </div>
        <div class="user">
            <div class="user-login">摆渡人</div>
        </div>
    </div>

    <div style="margin-top: 80px;width: 100%;display: flex;justify-content: center">
        <div style="width: 80%;display: flex;flex-direction: column;">
            <h2>壁纸列表</h2>
            <h5 style="color: red" th:text="${msg}"></h5>
        </div>
    </div>

    <div class="admin-list" style="margin-top: 10px;">
        <table class="admin-list-context">
            <tr>
                <th class="name">图片</th>
                <th style="width: 260px;">名称</th>
                <th style="width: 100px;">价格</th>
                <th style="width: 100px;">类型</th>
                <th style="width: 100px;">排名</th>
                <th style="width: 200px;">尺寸</th>
                <th style="width: 200px;">操作</th>
            </tr>
            <tr th:each="view:${views}">
                <td>
                    <img th:src="${view.viewPath}" class="image-context" alt="">
                </td>
                <td>
                    <span th:text="${view.name}" @click="modify($event)" style="cursor: pointer;" title="点击修改名称"></span>
                    <form th:action="@{'/modify/' + ${view.id}}" method="post" style="display: none;">
                        <label>
                            <input type="text" name="name" placeholder="输入新名称" class="name-modify">
                        </label>
                        <input type="submit" value="修改" class="modify">
                    </form>
                </td>
                <td th:text="${view.price}" style="color: #1890ff;"></td>
                <td th:text="${view.typeName}"></td>
                <td th:text="${view.sort}"></td>
                <td th:text="${view.size}"></td>
                <td>
                    <a th:href="@{'/sort/' + ${view.id}}">增加排名</a>
                    <a th:href="@{'/delete/' + ${view.id}}">删除壁纸</a>
                    <a th:href="${view.realPath}">查看原图</a>
                </td>
            </tr>
        </table>
    </div>
</div>
<script type="application/javascript">
    let vm = new Vue({
        el: '#app',
        data: {

        },
        methods:{
            modify:function (event) {
                let span = event.target;
                let form  = event.target.nextElementSibling;
                span.style.display = "none";
                form.style.display = "block";
            }
        }
    });
</script>
</body>
</html>